/*
 * @Author: jiu yin
 * @Date: 2024-05-07 14:09:35
 * @LastEditTime: 2024-06-14 12:01:37
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\ticket_order\component\OrderTicket.tsx
 * jiu
 */
import { print_ticket_notify } from "@/api/home";
import Print from "@/comment/Print";
import Modal_edit from "@/comment/modal_edit";
import User_avatar from "@/comment/user_avatar";
import { CheckCircleTwoTone } from "@ant-design/icons";
import { Button, Image, Checkbox, message } from "antd";
import { useState } from "react";
import "./index.scss";
export default function OrderTicket(props: any) {
	let {
		isModalOpen,
		order_ticket_data_arr: [order_ticket_data, set_get_order_ticket],
		reload,
	} = props;

	let [print_list, setPrint_list] = useState<any>([]);

	//单张打印
	const odd_print = (item: any) => {
		let arr = [{ goods_name: order_ticket_data.goods_name, ticket_no: item.ticket_no, ticket_url: item.ticket_url }];
		setPrint_list(arr);
	};

	//全部打印
	const handleOk = async () => {
		// 纸质
		if (check_value) {
			let arr = order_ticket_data.ticket_member.map((item: any) => {
				return { goods_name: order_ticket_data.goods_name, ticket_no: item.ticket_no, ticket_url: item.ticket_url };
			});
			setPrint_list(arr);
			console.log("ok了");
		} else {
			printOk();
		}
	};
	//打印完成回调
	const printOk = async () => {
		await print_ticket_notify({ order_no: order_ticket_data.order_no, is_print: check_value });
		//当前显示更新
		set_get_order_ticket({ ...order_ticket_data, is_settled: 1, is_print: check_value });
		reload();
	};

	//复选框
	const [check_value, set_check_value] = useState(0);
	return (
		<Modal_edit title="订单入场票" width={800} isModalOpen={isModalOpen}>
			<div className="mt-40px c-#161940">
				{/* 状态 */}
				{order_ticket_data.is_settled != 0 && (
					<section className="p-8px bg-#F6FFED border-rd-10px border_custom mb-20px">
						<CheckCircleTwoTone twoToneColor="#52c41a" />
						<span className="ml-10px">{order_ticket_data.is_print ? "已打印" : "已出票"}</span>
					</section>
				)}

				<section className="flex justify-between">
					<div className="font-700 flex">
						<Image width={84} className="border-rd-10px" src={order_ticket_data.goods_cover} />
						<div className="ml-10px ">
							<h5 className="c-#161940">{order_ticket_data.goods_name}</h5>
							<p className="c-#5C5F7A">{order_ticket_data.content}</p>
						</div>
					</div>
					<div className=" text-14px">
						<p className="c-#9e9fb0">
							订单号：&nbsp;<span className="c-#323557">{order_ticket_data.order_no}</span>
						</p>
						<p className="c-#9e9fb0">
							出票时间: <span className="c-#323557">{order_ticket_data.created_at}</span>
						</p>
					</div>
					<User_avatar
						options={{
							avatar_url: order_ticket_data.avatar_url,
							nickname: order_ticket_data.nickname,
							id: order_ticket_data.user_id,
						}}
					/>
				</section>

				<div>
					<section className="flex mt-25px mb-13px c-#9697A9 text-14px">
						<p>
							含票数:<span className="text-16px font-700 c-#161940 ml-8px">{order_ticket_data.num}</span>
						</p>
						<p className="ml-36px">
							支付金额:<span className="text-16px font-700 c-#161940 ml-8px">￥ {order_ticket_data.pay_price}</span>
						</p>
					</section>

					<section>
						<ul>
							{order_ticket_data.ticket_member.map((item: any, index: number) => (
								<li className="bg-#F7F9FF p-16px flex justify-between border-rd-10px mb-10px" key={index}>
									<p>入场票{index + 1}</p>
									<div className="flex">
										<p className="mr-20px">票码 ：{item.ticket_no}</p>
										{/* <a onClick={() => odd_print(item)}> 打印 </a> */}
									</div>
								</li>
							))}
						</ul>
					</section>

					<section className="flex  mt-40px">
						{/* 未打印就有单选 已打印就不显示 */}
						{order_ticket_data.is_settled == 0 && (
							<div>
								<Checkbox onChange={(e: any) => set_check_value(e.target.checked ? 1 : 0)}>打印纸质票</Checkbox>
							</div>
						)}

						<div className="flex flex-1 justify-center">
							<Button key="back" onClick={() => isModalOpen[1](false)}>
								取消
							</Button>
							{order_ticket_data.ticket_member.length > 0 && (
								<Button key="submit" type="primary" className="ml-20px" onClick={() => handleOk()}>
									{order_ticket_data.is_settled == 0 ? "全部出票" : "重新打印"}
								</Button>
							)}
						</div>
					</section>
				</div>
				<div className="fixed top--50000px left-0 ">
					{print_list.length ? <Print print_list={print_list} printOk={printOk}></Print> : null}
				</div>
			</div>
		</Modal_edit>
	);
}
